<template>
  <div class="container">
    <!-- 用户信息 -->
    <div class="user-info">
      <img :src="user.avatar" alt="用户头像" class="avatar" />
      <div class="details">
        <h2 class="name">{{ user.name }}</h2>
        <p class="account">我的账号 {{ user.account }}</p>
        <p class="address">收货地址 {{ user.address }}</p>
      </div>
    </div>

    <!-- VIP 提示 -->
    <div v-if="user.vipInfo" class="vip-info">
      {{ user.vipInfo }}
    </div>

    <!-- 订单状态 -->
    <div class="orders">
      <div v-for="(count, label) in orders" :key="label" class="order-item">
        <h3 class="count">{{ count }}</h3>
        <p class="label">{{ label }}</p>
      </div>
    </div>
    <div class="red-envelope">
      <div class="info">
        <p>红包 <span class="highlight">{{ user.redEnvelope }}元</span></p>
        <p>优惠券 {{ user.coupons }} 张</p>
      </div>
      <button class="coupon-btn" @click="useCoupon">
        {{ user.couponInfo }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import './Product.css'
import {layer} from "@layui/layui-vue";

// 动态数据
const user = reactive({
  name: "SilverCat",
  account: "Coda0623",
  address: "默认收货地址",
  avatar:
      "https://telegraph-image-766.pages.dev/file/6bc579156c90835f3a738.jpg", // 替换为实际头像地址
  vipInfo: "开88VIP可享全年无限次免费退货，可与运费险叠加使用",
  redEnvelope: 35,
  coupons: 0,
  couponInfo: "3元百亿补贴京喜红包，00:13:21后失效",
});

const orders = reactive({
  待付款: 0,
  待发货: 0,
  待收货: 0,
  待评价: 2,
  "退款/售后": 0,
});


function useCoupon() {
  layer.msg("作者表示想偷懒了，不太想写优惠！", {
    icon: 5, // 5 是表示错误的图标
    time: 3000, // 提示框显示 2 秒
  });
}
</script>
